<style lang="postcss" scoped>
.home-container {
}
</style>
<template>
  <section class="home-container">
    <MasterPage title>
      <!-- <div slot="searchContent" class="search-content-slot">
        <Form :model="formItem" :label-width="80">
          <Row>
            <Col span="6">
              <FormItem label="工号">
                <Input v-model="formItem.input"></Input>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="姓名">
                <Input v-model="formItem.input"></Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>-->
      <div slot="search">
        <Button
          style="margin-right:5px;"
          type="primary"
          icon="md-cloud-upload"
          @click="excelImport()"
        >成绩EXCEL导入</Button>
        <!-- <Button type="info" icon="md-cloud-download">成绩导出EXCEL</Button> -->
      </div>
      <!-- <div slot="btns">
        <Button type="info" icon="ios-search" @click="search()">查询</Button>
      </div>-->
      <div slot="paddingContent">
        <Table :columns="columns1" :data="pageData"></Table>
        <Modal title="EXCEL导入" v-model="modal1" class-name="vertical-center-modal">
          <Form :model="formItem" :label-width="80">
            <FormItem label="班级">
              <Select v-model="classId" style="width:200px">
                <Option
                  v-for="item in classList"
                  :value="item.id"
                  :key="item.id"
                  :label="item.name"
                ></Option>
              </Select>
            </FormItem>
            <FormItem>
              <Upload
                multiple
                type="drag"
                :action="GLOBAL.updateUrl+'/gm_teacher/importTeacherExcel'"
              >
                <div style="padding: 20px 0">
                  <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                  <p>点击或拖拽文件上传</p>
                </div>
              </Upload>
            </FormItem>
          </Form>
          <div slot="footer"></div>
        </Modal>
      </div>
      <div slot="pager">
        <!-- <Page :total="data1.length"/> -->
        <Page
          :total="pageTotal"
          :current="pageNum"
          :page-size="pageSize"
          show-total
          show-sizer
          placement="top"
          @on-change="handlePage"
          @on-page-size-change="handlePageSize"
        />
      </div>
    </MasterPage>
  </section>
</template>
<script>
import MasterPage from "@/components/Master";
// import { list, add, update, generate, remove } from '@/services/class'
import { pageList as classPageList } from "@/services/class";
import { pageList } from "@/services/grade";

export default {
  components: {
    MasterPage
  },
  async mounted() {
    console.log("grade");
    // this.data1 = await list()
    // console.log(this.data1);
    // this.pageTotal = this.data1.length;
    await this.search();
    
    let { list } = await classPageList();
    this.classList = list || [];
  },
  computed: {
    pageData() {
      let start = (this.pageNum - 1) * this.pageSize;
      let end = this.pageNum * this.pageSize;
      end = end > this.pageTotal ? this.pageTotal : end;
      return this.data1.slice(start, end);
    }
  },
  methods: {
    excelImport() {
      this.modal1 = true;
      this.files = [];
    },
    async ok() {
      console.log(this.classId, this.files.length);
      // this.data1 = await list()
    },
    async search() {
      let { count, list } = await pageList(this.formItem);
      this.data1 = list;
      this.pageTotal = count;
      // this.data1 = await pageList(this.formItem)
    },
    handlePage(n) {
      console.log(n, this.pageNum);
      this.pageNum = n;
    },
    handlePageSize(n) {
      console.log(n, this.pageSize);
      this.pageSize = n;
    }
  },
  data() {
    return {
      files: [],
      classId: "",
      classList: [{ id: 1, name: "一（1）班" }, { id: 2, name: "一（2）班" }],
      editdisable: false,
      selection: [],
      modal1: false,
      title: "",
      formData: {},
      pageTotal: 15,
      pageNum: 1,
      pageSize: 10,
      formItem: {
        input: "",
        select: "",
        radio: "male",
        checkbox: [],
        switch: true,
        date: "",
        time: "",
        slider: [20, 50],
        textarea: ""
      },
      columns1: [
        {
          title: "成绩编号",
          key: "gradeNo"
        },
        {
          title: "课程名称",
          key: "courseName"
        },
        {
          title: "学生学号",
          key: "studentNo"
        },
        {
          title: "学生姓名",
          key: "name"
        },
        {
          title: "平时成绩",
          key: "gradeOrdinary"
        },
        {
          title: "期中成绩",
          key: "gradeMid"
        },
        {
          title: "期末成绩",
          key: "gradeFinal"
        },
        {
          title: "课程总分",
          key: "gradeAll"
        },
        {
          title: "是否及格",
          key: "isPass",
          render: (h, params) => {
            return h(
              "p",
              !params.row.isPass
                ? ""
                : params.row.isPass == 1
                ? "及格"
                : "不及格"
            );
          }
        }
      ],
      data1: [
        {
          id: 1,
          gradeNo: "1",
          courseName: "语文",
          studentNo: "1",
          name: "赵大",
          gradeOrdinary: "11",
          gradeMid: "11",
          gradeFinal: "11",
          gradeAll: "11",
          isPass: "0"
        },
        {
          id: 2,
          gradeNo: "2",
          courseName: "数学",
          studentNo: "2",
          name: "赵大",
          gradeOrdinary: "99",
          gradeMid: "99",
          gradeFinal: "99",
          gradeAll: "99",
          isPass: "1"
        },
        {
          id: 1,
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        }
      ]
    };
  }
};
</script>
